<template>
  <div
    class="form-wrap"
    style="
       {
        --columns-num: 6;
      }
    "
  >
    <el-form v-bind="attrs">
      <el-form-item
        v-for="item in searchFormList"
        :key="item.prop"
        :label="item.label"
      >
        <template v-if="item.componentType === 'INPUT'">
          <el-input v-model="form[item.prop]" placeholder="请输入" />
        </template>
        <template v-else-if="item.componentType === 'SELECT'">
          <el-select v-model="form[item.prop]">
            <el-option label="选项1" value="1" />
            <el-option label="选项2" value="2" />
          </el-select>
        </template>
        <template v-else-if="item.componentType === 'RADIO'">
          <el-radio-group v-model="form[item.prop]">
            <el-radio label="1">选项1</el-radio>
            <el-radio label="2">选项2</el-radio>
          </el-radio-group>
        </template>
        <template v-else-if="item.componentType === 'CHECKBOX'">
          <el-checkbox-group v-model="form[item.prop]">
            <el-checkbox label="1">选项1</el-checkbox>
            <el-checkbox label="2">选项2</el-checkbox>
          </el-checkbox-group>
        </template>
        <template v-else-if="item.componentType === 'CASCADER'">
          <el-cascader v-model="form[item.prop]" :options="[]" />
        </template>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup>
import { reactive, useAttrs } from "vue";
const attrs = useAttrs();
console.log("attrs", attrs);

const props = defineProps({
  searchFormList: {
    type: Array,
    default: () => [],
  },
});

let form = reactive({});
</script>
<style lang="scss" scoped>
.form-wrap {
  background-color: #fff;
  padding: 12px 16px;
}
:deep(.el-form) {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px 16px;
  .el-form-item {
    margin-bottom: 0px;
  }
}
</style>
